import QtQuick 1.1
import com.nokia.meego 1.0
import com.nokia.extras 1.1

import "Variable.js" as Variable
Page {
    id: page1

    onVisibleChanged: recharge()
    tools: ToolBarLayout {
            id: toolBarLayout
            ToolIcon {
                   visible: true
                   platformIconId: "toolbar-back"
                   onClicked: {
                       Variable.pagesNb = 1;
                       pageStack.pop();
                   }
               }
                ToolIcon {
                    id: pagesPrevious;
                    platformIconId: "toolbar-tab-previous"
                    anchors.right: nbPages.left
                    onClicked: {
                        Variable.pagesPrevious();
                        listview.state = "loading"
                        Variable.load_pages(pageStack,0);
                    }
                }
                Button {
                    id: nbPages
                    width: 100
                    height: 50
                    checked: true
                    checkable: false
                    text: Variable.pagesNb +"/" + Variable.nb
                    anchors.centerIn: parent
                }
                ToolIcon {
                    id: pagesNext
                    platformIconId: "toolbar-tab-next"
                    anchors.left: nbPages.right
                    onClicked: {
                        Variable.pagesNext();
                        listview.state = "loading"
                        Variable.load_pages(pageStack,0);
                    }
                }
    }
    onHeightChanged: {
        hearder.height = parent.width < parent.height ? 72 : 46
    }
    Header{
        id: hearder
        height: 72
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        title: Variable.getCategorieName()
        Behavior on height { NumberAnimation { duration: 200 }}
    }
    function loading(){
        hearder.loading()
        listview.state = "loading"
    }
    function finished(){
        hearder.finish();
    }
    function recharge(){
        listview.state = "finish"
        finished();
        xmlModel.xml = Variable.xmlData;
        xmlModel_2.xml = Variable.xmlData;
        xmlModel.reload();
        xmlModel_2.reload();
    }
    XmlListModel{       //Error and Pages
        id: xmlModel_2
        query: "/root"
        XmlRole { name: "pages"; query: "pages/string()" }
        XmlRole { name: "error"; query: "error/string()" }
        onStatusChanged:{
            var xmlnbPages  = xmlModel_2.get(0).pages;
            Variable.nb = xmlnbPages;
            nbPages.text = Variable.pagesNb +"/" + xmlnbPages;
        }
    }
    XmlListModel{
        id: xmlModel
//        source: "http://api.fmylife.com/view/last?key=4fd9d0cb0463c&language=fr"
        query: "/root/items/item"
        XmlRole { name: "id"; query: "@id/string()"}
        XmlRole { name: "author"; query: "author/string()" }
        XmlRole { name: "category"; query: "category/string()" }
        XmlRole { name: "date"; query: "date/string()" }
        XmlRole { name: "from"; query: "from/string()" }
        XmlRole { name: "agree"; query: "agree/string()" }
        XmlRole { name: "deserved"; query: "deserved/string()" }
        XmlRole { name: "texte"; query: "text/string()" }
        XmlRole { name: "flag"; query: "comments_flags/string()" }
        XmlRole { name: "commentaire"; query: "comments/string()" }
        XmlRole { name: "lien"; query: "short_url/string()" }
        onProgressChanged: {
            hearder.value = progress
            console.debug("[Acceuil] Progression ... " + progress)
        }
        onXmlChanged: {
            xmlModel.errorString();
//            xmlModel.reload();
        }
    }
    Component{
        id: mydelegate
        Rectangle{
            id: rectangle_content
            state: "default"
            width: 500
            height: 190
            anchors.right: parent.right
            anchors.left: parent.left
            color: "transparent"
            states: [
                State {
                    name: "selected"
                    PropertyChanges {
                        target: rectangle_content
                        color: "lightsteelblue"
                    }
                },
                State {
                    name: "default"
                    PropertyChanges {
                        target: rectangle_content
                        color: "transparent"
                    }
                }
            ]
            transitions: [
                Transition {
                    from: "*"
                    to: "*"
                    ColorAnimation { from: "lightsteelblue"; to: "transparent"; duration: 300 }

                }
            ]

            Rectangle{
                id: rectangle_title
                height: 22
                color: "#db667c"
                anchors.left: parent.left
                anchors.leftMargin: 0
                anchors.right: parent.right
                anchors.rightMargin: 1
                opacity: 0.6
                Text {
                    id: title
                    text: "#"+id+"("+commentaire+")" + " " + author
                    font.pixelSize: 15
                    font.bold: true
                }
                Text {
                    id: info
                    x: 292
                    text: date
                    verticalAlignment: Text.AlignVCenter
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    anchors.right: parent.right
                    anchors.rightMargin: 0
                    horizontalAlignment: Text.AlignHCenter
                    font.pixelSize: 14
                }
            }

//            MyTextArea{
//                id: subTitle
//                height: 120
//                text: texte
//                bold: false
//                anchors.top: rectangle_title.bottom
//                anchors.topMargin: 0
//                anchors.left: parent.left
//                anchors.right: parent.right
//            }
            Text{
                id: subTitle
                text: texte
                wrapMode: Text.WordWrap
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: rectangle_title.bottom
                anchors.topMargin: 0
                font.pixelSize: 18

            }
            Button{
                id: rectangle_agreeVDM
                width: 170
                height: 30
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.leftMargin: 20
                text: "Je valide: " + "<b>" + agree +"<\b>"
                font.pixelSize: 13
                enabled: Variable.loginOk            //Active seulement si login a était fait
                onClicked: {
                    Variable.lien = "http://api.fmylife.com/vote/"+id+"/agree?key=4fd9d0cb0463c&language=fr"
                    Variable.load_pages(pageStack,3); //3 = Valide VDM
                }

            }
            ToolIcon{
                id: button_share
                width: 20
                height: 20
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10
                platformIconId: "toolbar-share"
                onClicked: {
                    (share_menu.status === DialogStatus.Closed) ? share_menu.open() : share_menu.close()
                }

            }

            Button{
                id: rectangle_deservedVDM
                width: 170
                height: 30
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                anchors.rightMargin: 20
                text: "Tu l'as bien mérité: " + "<b>"+ deserved + "<\b>"
                font.pixelSize: 13
                enabled: Variable.loginOk            //Active seulement si login a était fait

                onClicked: {
                    Variable.lien = "http://api.fmylife.com/vote/"+id+"/deserved?key=4fd9d0cb0463c&language=fr";
                    Variable.load_pages(pageStack,3); //3 = Valide VDM
                }
            }
            MouseArea {
                id: mouse
                anchors.bottom: rectangle_agreeVDM.top
                anchors.right: parent.right
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottomMargin: 10
                onClicked: {
                    loading();
                    Variable.lien = "http://api.fmylife.com/view/"+id+"?key=4fd9d0cb0463c&language=fr"
                    Variable.load_pages(pageStack,2) //2 = Commentaire
                    console.debug("Clicker sur " + id + parent.state)

                }
                onPressAndHold: (share_menu.status === DialogStatus.Closed) ? share_menu.open() : share_menu.close()
                onPressed: {
                    console.debug("Pressed !!")
                    rectangle_content.state = "selected"
                    rectangle_content.state = "default"
                }

            }
    }

    }
    ListView {
        id: listview
        anchors.top: hearder.bottom
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.topMargin: 0
        model: xmlModel
        delegate: mydelegate
        state: "finish"
        states: [
            State {
                name: "loading"
                PropertyChanges {
                    target: listview
                    opacity: 0.2
                    interactive: false
                }
            },
            State {
                name: "finish"
                PropertyChanges {
                    target: listview
                    opacity: 1
                    interactive: true
                }
            }
        ]
        transitions: [
            Transition {
                from: "*"
                to: "*"
                NumberAnimation{
                    duration: 400
                }
            }
        ]
     }
    ScrollDecorator{
        flickableItem: listview
    }
    InfoBanner {
        id: infobanner
        z:2
    }
    function showBanner(text) {
        infobanner.text = text
        infobanner.timerShowTime = 1000;
        infobanner.show();
    }
    Menu {
        id: share_menu
        visualParent: pageStack
        MenuLayout {
            MenuItem {
                text: qsTr("Copier du VDM")
                onClicked: {
                    clipboard.copy(texte)
                    showBanner("VDM copié dans le presse papier")
                }
            }
            MenuItem {
                text: qsTr("Copier l'URL")
                onClicked: {
                    clipboard.copy(lien);
                    showBanner("Lien du VDM Copié dans le presse papier")
                }
            }

        }
    }
}


